<template>
    <div>
        <el-button @click="updateFirst">更新第一条数据的信息</el-button>
        <el-button @click="updateSeconed">更新第二条数据的信息</el-button>
       <ul>
           <li v-for="item in personList" :key="item.id">
               <p>姓名：{{item.name}}</p>
               <p><span>性别：{{item.sex}}</span></p>
               <p><span>年龄：{{item.age}}</span></p>
              <p v-if="item.money"> <span >钱：{{item.money}}</span></p>
               </li>
       </ul>
       <div>
           <el-button @click="goHtml">模拟一个数据监测</el-button>
            
       </div>

       <p>set实现数据绑定的问题</p>
       <div>

           <p>1. set可以添加到data对象里面的属性</p>
            <el-button @click="addMoney">给personList里面的对象添加money属性</el-button>

       </div>
    </div>
</template>

<script>

export default {
    components: {
    },
    data(){
        return {
          
             personList: [
                {
                    name: "马冬梅",
                    age: 24,
                    sex: "女",
                    id: 1
                },
                {
                    name: "马小梅",
                    age: 22,
                    sex: "女",
                    id:2
                },
                {
                    name: "周杰伦",
                    age: 30,
                    sex: "男",
                    id: 3
                }
            ],
        }
    },
  
  computed:{
      
  },
  watch: {
  },
  created(){
  },
  methods:{
      // 更新第一条
      updateFirst() {
          this.personList[0].name = '马老师',
          this.personList[0].sex = '男'
      },
      // 更新第二条
      updateSeconed() {
          console.log("vue=",this._data);
          this.personList[1] = {
            name: "马小花",
            age: 22,
            sex: "女",
            id:2
          }
      },

      goHtml() {
        //   window.location.href = '../../../../static/index.html'
        
      },

      addMoney() {
          let len = this.personList.length
          for(let i = 0;i<len; i++) {
            //   this.personList[i].money = 1+i
            this.$set(this.personList[i],'money',0+i)
          }
      }
  }
}
</script>


<style scoped>

</style>